<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ui-icon</title>
    <style>
    body {
      margin:0;
      padding:10px 20px;
      background:#fff;
      color:#222;
    }
    h1, div, footer {
      font-family:"Helvetica Neue", Arial, sans-serif;
    }
    h1 {
      margin:0 0 20px;
      font-size:32px;
      font-weight:normal;
    }
    .icons {
      margin-bottom:40px;
      -webkit-column-count:5;
         -moz-column-count:5;
              column-count:5;
      -webkit-column-gap:20px;
         -moz-column-gap:20px;
              column-gap:20px;
    }
    .icons__item,
    .icons__item i {
      line-height:2em;
      cursor:pointer;
    }
    .icons__item i {
      display:inline-block;
      width:52px;
      font-size: 36px;
      text-align:center;
      vertical-align: middle;
    }
    .icons__item:hover {
      color:#3c90be;
    }
    .icons__item:hover i {
      -webkit-transform:scale(1.5);
              transform:scale(1.5);
    }
    .icons__item i:before {
      vertical-align: baseline;
    }
    footer {
      margin-top:40px;
      font-size:14px;
      color:#999;
    }
    /* Generated by grunt-webfont */
/* Template modified for LeanCloud by Tunghsiao Liu */
/* Based on https://github.com/sapegin/grunt-webfont/blob/master/tasks/templates/bootstrap.css */

/*

Changelog

Sep 16, 2015
- Add Less variable support

*/


@font-face {
  font-family:"ui-icon";
  src:url("../fonts/ui-icon.eot?c828c17750fc67b556111b1291095ecb");
  src:url("../fonts/ui-icon.eot?#iefix") format("embedded-opentype"),
		url("../fonts/ui-icon.woff2?c828c17750fc67b556111b1291095ecb") format("woff2"),
		url("../fonts/ui-icon.woff?c828c17750fc67b556111b1291095ecb") format("woff"),
		url("../fonts/ui-icon.svg?c828c17750fc67b556111b1291095ecb#ui-icon") format("svg");
  font-weight:normal;
  font-style:normal;
}


/* Bootstrap Overrides */
[class^="icon-"],
[class*=" icon-"] {
  font-family:"ui-icon";
  display:inline-block;
  vertical-align:middle;
  line-height:1;
  font-weight:normal;
  font-style:normal;
  speak:none;
  text-decoration:inherit;
  text-transform:none;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* Icons */


.icon-acl-disable-in-out:before {
  content:"\f101";
}



.icon-acl-disable-in:before {
  content:"\f102";
}



.icon-acl-disable-none:before {
  content:"\f103";
}



.icon-acl-disable-out:before {
  content:"\f104";
}



.icon-add:before {
  content:"\f105";
}



.icon-analytics:before {
  content:"\f106";
}



.icon-apple:before {
  content:"\f107";
}



.icon-arrow-simple-bold:before {
  content:"\f108";
}



.icon-arrow-simple:before {
  content:"\f109";
}



.icon-at:before {
  content:"\f10a";
}



.icon-atom:before {
  content:"\f10b";
}



.icon-avatar:before {
  content:"\f10c";
}



.icon-bandaid:before {
  content:"\f10d";
}



.icon-beaker:before {
  content:"\f10e";
}



.icon-blank-app:before {
  content:"\f10f";
}



.icon-browser:before {
  content:"\f110";
}



.icon-building:before {
  content:"\f111";
}



.icon-bulb:before {
  content:"\f112";
}



.icon-cabinet-bold:before {
  content:"\f113";
}



.icon-cabinet:before {
  content:"\f114";
}



.icon-calendar:before {
  content:"\f115";
}



.icon-chart-alt:before {
  content:"\f116";
}



.icon-chart-bold:before {
  content:"\f117";
}



.icon-chart:before {
  content:"\f118";
}



.icon-chat-alt-bold:before {
  content:"\f119";
}



.icon-chat-alt:before {
  content:"\f11a";
}



.icon-chat-bold:before {
  content:"\f11b";
}



.icon-chat:before {
  content:"\f11c";
}



.icon-checked-bold:before {
  content:"\f11d";
}



.icon-checked:before {
  content:"\f11e";
}



.icon-checkmark-bold:before {
  content:"\f11f";
}



.icon-clipboard:before {
  content:"\f120";
}



.icon-cloud-storage:before {
  content:"\f121";
}



.icon-cloud:before {
  content:"\f122";
}



.icon-compare:before {
  content:"\f123";
}



.icon-compose:before {
  content:"\f124";
}



.icon-compress:before {
  content:"\f125";
}



.icon-console-run:before {
  content:"\f126";
}



.icon-contact-card:before {
  content:"\f127";
}



.icon-controller:before {
  content:"\f128";
}



.icon-credit-card:before {
  content:"\f129";
}



.icon-crown:before {
  content:"\f12a";
}



.icon-danger:before {
  content:"\f12b";
}



.icon-dashboard:before {
  content:"\f12c";
}



.icon-database-bold:before {
  content:"\f12d";
}



.icon-devices:before {
  content:"\f12e";
}



.icon-dollars-bold:before {
  content:"\f12f";
}



.icon-download:before {
  content:"\f130";
}



.icon-edit:before {
  content:"\f131";
}



.icon-envelope-bold:before {
  content:"\f132";
}



.icon-envelope:before {
  content:"\f133";
}



.icon-expand:before {
  content:"\f134";
}



.icon-external:before {
  content:"\f135";
}



.icon-factory:before {
  content:"\f136";
}



.icon-filter:before {
  content:"\f137";
}



.icon-gear-bold:before {
  content:"\f138";
}



.icon-gear:before {
  content:"\f139";
}



.icon-gears:before {
  content:"\f13a";
}



.icon-git-branch:before {
  content:"\f13b";
}



.icon-github:before {
  content:"\f13c";
}



.icon-globe-alt-2:before {
  content:"\f13d";
}



.icon-globe-alt:before {
  content:"\f13e";
}



.icon-globe:before {
  content:"\f13f";
}



.icon-golf:before {
  content:"\f140";
}



.icon-google-play:before {
  content:"\f141";
}



.icon-graduation:before {
  content:"\f142";
}



.icon-graph:before {
  content:"\f143";
}



.icon-hammer-bold:before {
  content:"\f144";
}



.icon-heartbeat:before {
  content:"\f145";
}



.icon-home-bold:before {
  content:"\f146";
}



.icon-home:before {
  content:"\f147";
}



.icon-id-card:before {
  content:"\f148";
}



.icon-inbox-empty:before {
  content:"\f149";
}



.icon-inbox-files-bold:before {
  content:"\f14a";
}



.icon-inbox-files:before {
  content:"\f14b";
}



.icon-info:before {
  content:"\f14c";
}



.icon-internal:before {
  content:"\f14d";
}



.icon-key-bold:before {
  content:"\f14e";
}



.icon-key:before {
  content:"\f14f";
}



.icon-keyhole:before {
  content:"\f150";
}



.icon-layer-alt:before {
  content:"\f151";
}



.icon-layer-bold:before {
  content:"\f152";
}



.icon-layer-thin:before {
  content:"\f153";
}



.icon-lightning:before {
  content:"\f154";
}



.icon-list-selected:before {
  content:"\f155";
}



.icon-list:before {
  content:"\f156";
}



.icon-location-arrow:before {
  content:"\f157";
}



.icon-lock:before {
  content:"\f158";
}



.icon-locked-on:before {
  content:"\f159";
}



.icon-locked:before {
  content:"\f15a";
}



.icon-log:before {
  content:"\f15b";
}



.icon-magic:before {
  content:"\f15c";
}



.icon-magnet:before {
  content:"\f15d";
}



.icon-map-location:before {
  content:"\f15e";
}



.icon-megaphone-bold:before {
  content:"\f15f";
}



.icon-mobile:before {
  content:"\f160";
}



.icon-multi-lang:before {
  content:"\f161";
}



.icon-outbound:before {
  content:"\f162";
}



.icon-package:before {
  content:"\f163";
}



.icon-path:before {
  content:"\f164";
}



.icon-pen:before {
  content:"\f165";
}



.icon-phone-bold:before {
  content:"\f166";
}



.icon-phone:before {
  content:"\f167";
}



.icon-pie-chart:before {
  content:"\f168";
}



.icon-piggy-bank:before {
  content:"\f169";
}



.icon-plan:before {
  content:"\f16a";
}



.icon-plane:before {
  content:"\f16b";
}



.icon-play-bold:before {
  content:"\f16c";
}



.icon-play:before {
  content:"\f16d";
}



.icon-plug:before {
  content:"\f16e";
}



.icon-presentation-bold:before {
  content:"\f16f";
}



.icon-push-bold:before {
  content:"\f170";
}



.icon-push:before {
  content:"\f171";
}



.icon-question:before {
  content:"\f172";
}



.icon-radar:before {
  content:"\f173";
}



.icon-refresh:before {
  content:"\f174";
}



.icon-rewind:before {
  content:"\f175";
}



.icon-rss:before {
  content:"\f176";
}



.icon-satellite:before {
  content:"\f177";
}



.icon-schema-free:before {
  content:"\f178";
}



.icon-search-bold:before {
  content:"\f179";
}



.icon-search:before {
  content:"\f17a";
}



.icon-server-rack-bold:before {
  content:"\f17b";
}



.icon-share-bold:before {
  content:"\f17c";
}



.icon-share:before {
  content:"\f17d";
}



.icon-signpost:before {
  content:"\f17e";
}



.icon-slider-alt:before {
  content:"\f17f";
}



.icon-slider-nav-left:before {
  content:"\f180";
}



.icon-slider-nav-right:before {
  content:"\f181";
}



.icon-slider:before {
  content:"\f182";
}



.icon-smile-bold:before {
  content:"\f183";
}



.icon-smile:before {
  content:"\f184";
}



.icon-sms:before {
  content:"\f185";
}



.icon-stopwatch:before {
  content:"\f186";
}



.icon-target:before {
  content:"\f187";
}



.icon-team-bold:before {
  content:"\f188";
}



.icon-team:before {
  content:"\f189";
}



.icon-timer:before {
  content:"\f18a";
}



.icon-trash:before {
  content:"\f18b";
}



.icon-twitter:before {
  content:"\f18c";
}



.icon-user:before {
  content:"\f18d";
}



.icon-users-bold:before {
  content:"\f18e";
}



.icon-users:before {
  content:"\f18f";
}



.icon-wandoujia:before {
  content:"\f190";
}



.icon-wechat-alt:before {
  content:"\f191";
}



.icon-weibo:before {
  content:"\f192";
}



.icon-window:before {
  content:"\f193";
}



.icon-wrench:before {
  content:"\f194";
}



.icon-yen-bold:before {
  content:"\f195";
}




    </style>
  </head>
  <body>
    <h1>ui-icon</h1>

    <div class="icons" id="icons">
      
        <div class="icons__item" data-name="acl-disable-in-out"><i class=" icon-acl-disable-in-out"></i> icon-acl-disable-in-out</div>
      
        <div class="icons__item" data-name="acl-disable-in"><i class=" icon-acl-disable-in"></i> icon-acl-disable-in</div>
      
        <div class="icons__item" data-name="acl-disable-none"><i class=" icon-acl-disable-none"></i> icon-acl-disable-none</div>
      
        <div class="icons__item" data-name="acl-disable-out"><i class=" icon-acl-disable-out"></i> icon-acl-disable-out</div>
      
        <div class="icons__item" data-name="add"><i class=" icon-add"></i> icon-add</div>
      
        <div class="icons__item" data-name="analytics"><i class=" icon-analytics"></i> icon-analytics</div>
      
        <div class="icons__item" data-name="apple"><i class=" icon-apple"></i> icon-apple</div>
      
        <div class="icons__item" data-name="arrow-simple-bold"><i class=" icon-arrow-simple-bold"></i> icon-arrow-simple-bold</div>
      
        <div class="icons__item" data-name="arrow-simple"><i class=" icon-arrow-simple"></i> icon-arrow-simple</div>
      
        <div class="icons__item" data-name="at"><i class=" icon-at"></i> icon-at</div>
      
        <div class="icons__item" data-name="atom"><i class=" icon-atom"></i> icon-atom</div>
      
        <div class="icons__item" data-name="avatar"><i class=" icon-avatar"></i> icon-avatar</div>
      
        <div class="icons__item" data-name="bandaid"><i class=" icon-bandaid"></i> icon-bandaid</div>
      
        <div class="icons__item" data-name="beaker"><i class=" icon-beaker"></i> icon-beaker</div>
      
        <div class="icons__item" data-name="blank-app"><i class=" icon-blank-app"></i> icon-blank-app</div>
      
        <div class="icons__item" data-name="browser"><i class=" icon-browser"></i> icon-browser</div>
      
        <div class="icons__item" data-name="building"><i class=" icon-building"></i> icon-building</div>
      
        <div class="icons__item" data-name="bulb"><i class=" icon-bulb"></i> icon-bulb</div>
      
        <div class="icons__item" data-name="cabinet-bold"><i class=" icon-cabinet-bold"></i> icon-cabinet-bold</div>
      
        <div class="icons__item" data-name="cabinet"><i class=" icon-cabinet"></i> icon-cabinet</div>
      
        <div class="icons__item" data-name="calendar"><i class=" icon-calendar"></i> icon-calendar</div>
      
        <div class="icons__item" data-name="chart-alt"><i class=" icon-chart-alt"></i> icon-chart-alt</div>
      
        <div class="icons__item" data-name="chart-bold"><i class=" icon-chart-bold"></i> icon-chart-bold</div>
      
        <div class="icons__item" data-name="chart"><i class=" icon-chart"></i> icon-chart</div>
      
        <div class="icons__item" data-name="chat-alt-bold"><i class=" icon-chat-alt-bold"></i> icon-chat-alt-bold</div>
      
        <div class="icons__item" data-name="chat-alt"><i class=" icon-chat-alt"></i> icon-chat-alt</div>
      
        <div class="icons__item" data-name="chat-bold"><i class=" icon-chat-bold"></i> icon-chat-bold</div>
      
        <div class="icons__item" data-name="chat"><i class=" icon-chat"></i> icon-chat</div>
      
        <div class="icons__item" data-name="checked-bold"><i class=" icon-checked-bold"></i> icon-checked-bold</div>
      
        <div class="icons__item" data-name="checked"><i class=" icon-checked"></i> icon-checked</div>
      
        <div class="icons__item" data-name="checkmark-bold"><i class=" icon-checkmark-bold"></i> icon-checkmark-bold</div>
      
        <div class="icons__item" data-name="clipboard"><i class=" icon-clipboard"></i> icon-clipboard</div>
      
        <div class="icons__item" data-name="cloud-storage"><i class=" icon-cloud-storage"></i> icon-cloud-storage</div>
      
        <div class="icons__item" data-name="cloud"><i class=" icon-cloud"></i> icon-cloud</div>
      
        <div class="icons__item" data-name="compare"><i class=" icon-compare"></i> icon-compare</div>
      
        <div class="icons__item" data-name="compose"><i class=" icon-compose"></i> icon-compose</div>
      
        <div class="icons__item" data-name="compress"><i class=" icon-compress"></i> icon-compress</div>
      
        <div class="icons__item" data-name="console-run"><i class=" icon-console-run"></i> icon-console-run</div>
      
        <div class="icons__item" data-name="contact-card"><i class=" icon-contact-card"></i> icon-contact-card</div>
      
        <div class="icons__item" data-name="controller"><i class=" icon-controller"></i> icon-controller</div>
      
        <div class="icons__item" data-name="credit-card"><i class=" icon-credit-card"></i> icon-credit-card</div>
      
        <div class="icons__item" data-name="crown"><i class=" icon-crown"></i> icon-crown</div>
      
        <div class="icons__item" data-name="danger"><i class=" icon-danger"></i> icon-danger</div>
      
        <div class="icons__item" data-name="dashboard"><i class=" icon-dashboard"></i> icon-dashboard</div>
      
        <div class="icons__item" data-name="database-bold"><i class=" icon-database-bold"></i> icon-database-bold</div>
      
        <div class="icons__item" data-name="devices"><i class=" icon-devices"></i> icon-devices</div>
      
        <div class="icons__item" data-name="dollars-bold"><i class=" icon-dollars-bold"></i> icon-dollars-bold</div>
      
        <div class="icons__item" data-name="download"><i class=" icon-download"></i> icon-download</div>
      
        <div class="icons__item" data-name="edit"><i class=" icon-edit"></i> icon-edit</div>
      
        <div class="icons__item" data-name="envelope-bold"><i class=" icon-envelope-bold"></i> icon-envelope-bold</div>
      
        <div class="icons__item" data-name="envelope"><i class=" icon-envelope"></i> icon-envelope</div>
      
        <div class="icons__item" data-name="expand"><i class=" icon-expand"></i> icon-expand</div>
      
        <div class="icons__item" data-name="external"><i class=" icon-external"></i> icon-external</div>
      
        <div class="icons__item" data-name="factory"><i class=" icon-factory"></i> icon-factory</div>
      
        <div class="icons__item" data-name="filter"><i class=" icon-filter"></i> icon-filter</div>
      
        <div class="icons__item" data-name="gear-bold"><i class=" icon-gear-bold"></i> icon-gear-bold</div>
      
        <div class="icons__item" data-name="gear"><i class=" icon-gear"></i> icon-gear</div>
      
        <div class="icons__item" data-name="gears"><i class=" icon-gears"></i> icon-gears</div>
      
        <div class="icons__item" data-name="git-branch"><i class=" icon-git-branch"></i> icon-git-branch</div>
      
        <div class="icons__item" data-name="github"><i class=" icon-github"></i> icon-github</div>
      
        <div class="icons__item" data-name="globe-alt-2"><i class=" icon-globe-alt-2"></i> icon-globe-alt-2</div>
      
        <div class="icons__item" data-name="globe-alt"><i class=" icon-globe-alt"></i> icon-globe-alt</div>
      
        <div class="icons__item" data-name="globe"><i class=" icon-globe"></i> icon-globe</div>
      
        <div class="icons__item" data-name="golf"><i class=" icon-golf"></i> icon-golf</div>
      
        <div class="icons__item" data-name="google-play"><i class=" icon-google-play"></i> icon-google-play</div>
      
        <div class="icons__item" data-name="graduation"><i class=" icon-graduation"></i> icon-graduation</div>
      
        <div class="icons__item" data-name="graph"><i class=" icon-graph"></i> icon-graph</div>
      
        <div class="icons__item" data-name="hammer-bold"><i class=" icon-hammer-bold"></i> icon-hammer-bold</div>
      
        <div class="icons__item" data-name="heartbeat"><i class=" icon-heartbeat"></i> icon-heartbeat</div>
      
        <div class="icons__item" data-name="home-bold"><i class=" icon-home-bold"></i> icon-home-bold</div>
      
        <div class="icons__item" data-name="home"><i class=" icon-home"></i> icon-home</div>
      
        <div class="icons__item" data-name="id-card"><i class=" icon-id-card"></i> icon-id-card</div>
      
        <div class="icons__item" data-name="inbox-empty"><i class=" icon-inbox-empty"></i> icon-inbox-empty</div>
      
        <div class="icons__item" data-name="inbox-files-bold"><i class=" icon-inbox-files-bold"></i> icon-inbox-files-bold</div>
      
        <div class="icons__item" data-name="inbox-files"><i class=" icon-inbox-files"></i> icon-inbox-files</div>
      
        <div class="icons__item" data-name="info"><i class=" icon-info"></i> icon-info</div>
      
        <div class="icons__item" data-name="internal"><i class=" icon-internal"></i> icon-internal</div>
      
        <div class="icons__item" data-name="key-bold"><i class=" icon-key-bold"></i> icon-key-bold</div>
      
        <div class="icons__item" data-name="key"><i class=" icon-key"></i> icon-key</div>
      
        <div class="icons__item" data-name="keyhole"><i class=" icon-keyhole"></i> icon-keyhole</div>
      
        <div class="icons__item" data-name="layer-alt"><i class=" icon-layer-alt"></i> icon-layer-alt</div>
      
        <div class="icons__item" data-name="layer-bold"><i class=" icon-layer-bold"></i> icon-layer-bold</div>
      
        <div class="icons__item" data-name="layer-thin"><i class=" icon-layer-thin"></i> icon-layer-thin</div>
      
        <div class="icons__item" data-name="lightning"><i class=" icon-lightning"></i> icon-lightning</div>
      
        <div class="icons__item" data-name="list-selected"><i class=" icon-list-selected"></i> icon-list-selected</div>
      
        <div class="icons__item" data-name="list"><i class=" icon-list"></i> icon-list</div>
      
        <div class="icons__item" data-name="location-arrow"><i class=" icon-location-arrow"></i> icon-location-arrow</div>
      
        <div class="icons__item" data-name="lock"><i class=" icon-lock"></i> icon-lock</div>
      
        <div class="icons__item" data-name="locked-on"><i class=" icon-locked-on"></i> icon-locked-on</div>
      
        <div class="icons__item" data-name="locked"><i class=" icon-locked"></i> icon-locked</div>
      
        <div class="icons__item" data-name="log"><i class=" icon-log"></i> icon-log</div>
      
        <div class="icons__item" data-name="magic"><i class=" icon-magic"></i> icon-magic</div>
      
        <div class="icons__item" data-name="magnet"><i class=" icon-magnet"></i> icon-magnet</div>
      
        <div class="icons__item" data-name="map-location"><i class=" icon-map-location"></i> icon-map-location</div>
      
        <div class="icons__item" data-name="megaphone-bold"><i class=" icon-megaphone-bold"></i> icon-megaphone-bold</div>
      
        <div class="icons__item" data-name="mobile"><i class=" icon-mobile"></i> icon-mobile</div>
      
        <div class="icons__item" data-name="multi-lang"><i class=" icon-multi-lang"></i> icon-multi-lang</div>
      
        <div class="icons__item" data-name="outbound"><i class=" icon-outbound"></i> icon-outbound</div>
      
        <div class="icons__item" data-name="package"><i class=" icon-package"></i> icon-package</div>
      
        <div class="icons__item" data-name="path"><i class=" icon-path"></i> icon-path</div>
      
        <div class="icons__item" data-name="pen"><i class=" icon-pen"></i> icon-pen</div>
      
        <div class="icons__item" data-name="phone-bold"><i class=" icon-phone-bold"></i> icon-phone-bold</div>
      
        <div class="icons__item" data-name="phone"><i class=" icon-phone"></i> icon-phone</div>
      
        <div class="icons__item" data-name="pie-chart"><i class=" icon-pie-chart"></i> icon-pie-chart</div>
      
        <div class="icons__item" data-name="piggy-bank"><i class=" icon-piggy-bank"></i> icon-piggy-bank</div>
      
        <div class="icons__item" data-name="plan"><i class=" icon-plan"></i> icon-plan</div>
      
        <div class="icons__item" data-name="plane"><i class=" icon-plane"></i> icon-plane</div>
      
        <div class="icons__item" data-name="play-bold"><i class=" icon-play-bold"></i> icon-play-bold</div>
      
        <div class="icons__item" data-name="play"><i class=" icon-play"></i> icon-play</div>
      
        <div class="icons__item" data-name="plug"><i class=" icon-plug"></i> icon-plug</div>
      
        <div class="icons__item" data-name="presentation-bold"><i class=" icon-presentation-bold"></i> icon-presentation-bold</div>
      
        <div class="icons__item" data-name="push-bold"><i class=" icon-push-bold"></i> icon-push-bold</div>
      
        <div class="icons__item" data-name="push"><i class=" icon-push"></i> icon-push</div>
      
        <div class="icons__item" data-name="question"><i class=" icon-question"></i> icon-question</div>
      
        <div class="icons__item" data-name="radar"><i class=" icon-radar"></i> icon-radar</div>
      
        <div class="icons__item" data-name="refresh"><i class=" icon-refresh"></i> icon-refresh</div>
      
        <div class="icons__item" data-name="rewind"><i class=" icon-rewind"></i> icon-rewind</div>
      
        <div class="icons__item" data-name="rss"><i class=" icon-rss"></i> icon-rss</div>
      
        <div class="icons__item" data-name="satellite"><i class=" icon-satellite"></i> icon-satellite</div>
      
        <div class="icons__item" data-name="schema-free"><i class=" icon-schema-free"></i> icon-schema-free</div>
      
        <div class="icons__item" data-name="search-bold"><i class=" icon-search-bold"></i> icon-search-bold</div>
      
        <div class="icons__item" data-name="search"><i class=" icon-search"></i> icon-search</div>
      
        <div class="icons__item" data-name="server-rack-bold"><i class=" icon-server-rack-bold"></i> icon-server-rack-bold</div>
      
        <div class="icons__item" data-name="share-bold"><i class=" icon-share-bold"></i> icon-share-bold</div>
      
        <div class="icons__item" data-name="share"><i class=" icon-share"></i> icon-share</div>
      
        <div class="icons__item" data-name="signpost"><i class=" icon-signpost"></i> icon-signpost</div>
      
        <div class="icons__item" data-name="slider-alt"><i class=" icon-slider-alt"></i> icon-slider-alt</div>
      
        <div class="icons__item" data-name="slider-nav-left"><i class=" icon-slider-nav-left"></i> icon-slider-nav-left</div>
      
        <div class="icons__item" data-name="slider-nav-right"><i class=" icon-slider-nav-right"></i> icon-slider-nav-right</div>
      
        <div class="icons__item" data-name="slider"><i class=" icon-slider"></i> icon-slider</div>
      
        <div class="icons__item" data-name="smile-bold"><i class=" icon-smile-bold"></i> icon-smile-bold</div>
      
        <div class="icons__item" data-name="smile"><i class=" icon-smile"></i> icon-smile</div>
      
        <div class="icons__item" data-name="sms"><i class=" icon-sms"></i> icon-sms</div>
      
        <div class="icons__item" data-name="stopwatch"><i class=" icon-stopwatch"></i> icon-stopwatch</div>
      
        <div class="icons__item" data-name="target"><i class=" icon-target"></i> icon-target</div>
      
        <div class="icons__item" data-name="team-bold"><i class=" icon-team-bold"></i> icon-team-bold</div>
      
        <div class="icons__item" data-name="team"><i class=" icon-team"></i> icon-team</div>
      
        <div class="icons__item" data-name="timer"><i class=" icon-timer"></i> icon-timer</div>
      
        <div class="icons__item" data-name="trash"><i class=" icon-trash"></i> icon-trash</div>
      
        <div class="icons__item" data-name="twitter"><i class=" icon-twitter"></i> icon-twitter</div>
      
        <div class="icons__item" data-name="user"><i class=" icon-user"></i> icon-user</div>
      
        <div class="icons__item" data-name="users-bold"><i class=" icon-users-bold"></i> icon-users-bold</div>
      
        <div class="icons__item" data-name="users"><i class=" icon-users"></i> icon-users</div>
      
        <div class="icons__item" data-name="wandoujia"><i class=" icon-wandoujia"></i> icon-wandoujia</div>
      
        <div class="icons__item" data-name="wechat-alt"><i class=" icon-wechat-alt"></i> icon-wechat-alt</div>
      
        <div class="icons__item" data-name="weibo"><i class=" icon-weibo"></i> icon-weibo</div>
      
        <div class="icons__item" data-name="window"><i class=" icon-window"></i> icon-window</div>
      
        <div class="icons__item" data-name="wrench"><i class=" icon-wrench"></i> icon-wrench</div>
      
        <div class="icons__item" data-name="yen-bold"><i class=" icon-yen-bold"></i> icon-yen-bold</div>
      
    </div>

    

    <h1>Usage</h1>
    <pre><code>&lt;i class=&quot;icon-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
    

    <footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>, theme modified by <a href="http://sparanoid.com/">Tunghsiao Liu</a> for <a href="http://leancloud.cn/">LeanCloud</a></footer>

    <script>
    (function() {
      document.getElementById('icons').onclick = function(e) {
        e = e || window.event;
        var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
        document.getElementById('name').innerHTML = name;
        document.getElementById('name2').innerHTML = name;
      }
    })();
    </script>
  </body>
</html>
